<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>pace.js</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="pace.js"></script>
    <link rel="stylesheet" href="pace.css">
    <style>
    #loading_cover {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
    }
    </style>
    <script>
    paceOptions = {
            ajax: true, // disabled
            document: true, // disabled
            eventLag: true, // disabled
            elements: {
                selectors: ['.my-page']
            }
        },

        Pace.on("start", function() {
            console.log("开始加载进度");
        });
    Pace.on('hide', function() {
        console.log("done");
        $("#loading_cover").fadeOut();
    });
    </script>
</head>

<body>
    <div id="loading_cover"></div>
    <div class="my-page">
        <img src="http://wxdisneytown.comeyes.com/File/Images/201745105226564.png" alt="">
        <img src="http://wxdisneytown.comeyes.com/File/Images/20174512717734.png" alt="">
        <img src="http://wxdisneytown.comeyes.com/File/Images/201755193925497.png" alt="">
        <img src="http://wxdisneytown.comeyes.com/File/Images/201745105734953.png" alt="">
    </div>
</body>

</html>